<template>
    <CommonCard title="交易用户数" :count="orderUser">
        <template #middle>
            <v-chart :autoresize="true" :option="setOption()" ></v-chart>
        </template>
        <template #bottom>
            <span>退货率</span>
            <span class="ml-10">{{ returnRate }}</span>
        </template>
    </CommonCard>
</template>

<script setup lang="ts">
import CommonCard from "../CommonCard/index.vue"
import useEchartStore from '@/stores/echart'
import { computed, ref } from "vue";
const echartStore = useEchartStore();
const orderUser = computed(() => {
    return echartStore.echartData.orderUser
})
const returnRate = computed(() => {
    return echartStore.echartData.returnRate
})
const orderUserTrend = computed(() => {
    return echartStore.echartData.orderUserTrend
})
const orderUserTrendAxis = computed(() => {
    return echartStore.echartData.orderUserTrendAxis
})
const setOption = () => {
    return {
        xAxis: {
            show: false,
            data: orderUserTrendAxis.value
        },
        yAxis: {
            show: false
        },
        grid: {
            left: 0,
            top: 0,
            bottom: 0,
            right: 0
        },
        series: {
            name: '交易用户数',
            type: 'bar',
            data: orderUserTrend.value,
            barWidth: '60%'
        }
    }
}
</script>

<style scoped>

</style>